<template>
	<view>
		<uni-section title="取号信息" type="line">
			<view class="box-bg">
				<uni-nav-bar border="false" height="150rpx" left-icon="left" title="搜索餐厅" @clickLeft="back" />
			</view>
		</uni-section>
		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @input="input" @cancel="cancel"
			@clear="clear" radius="100" bgColor="#fff" placeholder="请输入餐厅"><!-- @blur="blur" -->
		</uni-search-bar>
		<view class="hall" v-for="v in list" :key="v.id">
			<!-- <view>
			 <view class="name">{{v.name}}名字</view>
			 <view class="status">{{v.status}}</view>
			 </view> -->
			<view class="name" @click="take(v.id)">
				<view class="name1">
					<view>{{v.name}}</view>
					<view class="st">
						<view class="status">{{v.status}}</view>
					</view>
				</view>
				<view class="name2">
					<view>
						<image
							src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u637.png">
						</image>
					</view>
				</view>
				<view class="name3">
					<view>
						<image
							src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u640.png">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				searchValue: '',
				list: [],
				call:'11',
				state:0
			}
		},
		methods: {
			// search(res) {
			// 	uni.showToast({
			// 		title: '搜索：' + res.value,
			// 		icon: 'none'
			// 	})
			// },
			input(res) {
				console.log('----input:', res)
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			clear(res) {
				uni.showToast({
					title: '清除值为：' + res.value,
					icon: 'none'
				})
			},
			// blur(res) {
			// 	uni.showToast({
			// 		title: '搜索餐厅：' + res.value,
			// 		icon: 'none'
			// 	});
			// 	http({
			// 		url: '/selectHall',
			// 		method: 'POST',
			// 		data: {
			// 			name: this.searchValue
			// 		},
			// 		success: (res) => {
			// 			console.log(res.data);
			// 			//console.log(this.list);
			// 			this.list = res.data;
			// 			// console.log(this.list)
			// 			console.log('11111111');
			// 		}
			// 	})
			// },
			take(key){
				if(this.state==3){
				uni.navigateTo({
					url: "/pages/takeNum/takeNum?id="+key
				});
				console.log(key);
				}
				else if(this.state==1){
					uni.navigateTo({
						url: "/pages/message/message?id="+key
					});
					console.log(key);
				}
				else if(this.state==2){
					uni.navigateTo({
						url:'/pages/Delivery/Delivery?id='+key
					})
				}
			},
			back(){
				// uni.redirectTo({
				// 	url: "/pages/choiceshop/choiceshop"
				// });
				uni.navigateBack({
					delta:0,
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索餐厅：' + res.value,
					icon: 'none'
				});
				http({
					url: '/selectHall',
					method: 'POST',
					data: {
						name: this.searchValue
					},
					success: (res) => {
						console.log(res.data);
						//console.log(this.list);
						this.list = res.data;
						// console.log(this.list)
						console.log('11111111');
					}
				})
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			if (option.state != undefined) {
				console.log(option.state); //打印出上个页面传递的参数。
				this.state = option.state;
				console.log('this.state:' + this.state);
				// console.log(option.name); //打印出上个页面传递的参数。
			} else {
				console.log('默认state=' + this.state);
			}
		},
	}
</script>

<style>
	.uni-searchbar__box {
		border: 2rpx solid #a7a7a7;
	}

	.uni-searchbar__cancel {
		color: #d3d3d3;
	}

	.box-bg {
		border: none;
	}

	.uni-navbar__content.data-v-6bda1a90.uni-navbar--border {
		border: none;
	}

	.name {
		display: flex;
		padding: 15rpx;
		margin: 30rpx;
		border: 2rpx solid #eee;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.name1 {
		flex: 5;
	}

	.name1 view:nth-child(1) {
		padding-top: 15rpx;
	}

	.name1 view:nth-child(2) {
		color: #d1d1d1;
		font-size: 25rpx;
		padding: 15rpx;
	}

	.name2 {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.name2 view {
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(247, 114, 20, 0.0980392156862745);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.name2>view image {
		width: 30rpx;
		height: 30rpx;
	}

	.name3 {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.name3 view {
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(247, 114, 20, 0.0980392156862745);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.name3>view image {
		width: 30rpx;
		height: 30rpx;
	}

	.status {
		color: #f77214;
	}
</style>
